<!-- 关注类应收账款督办弹窗列表 -->
<template>
  <a-modal
    :maskClosable="false"
    :title="title"
    :width="1350"
    :bodyStyle="{
      padding: '0 24px'
    }"
    :visible="visible"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-card
      :bordered="false"
      :bodyStyle="{
        padding: '10px'
      }">
      <div>
        <a-button @click="handleAdd" type="primary" icon="plus" style="margin-bottom: 20px;">新增</a-button>
        <a-table
          ref="table"
          rowKey="id"
          :scroll="{x:scrollX}"
          :components="draggableComponent"
          bordered
          :columns="dragResizeColumns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          @change="handleTableChange"
          class="j-table-force-nowrap"
          wrapClassName="ant-modal-cust-warp">
          <span slot="action" slot-scope="text, record">
            <template>
              <a-button
                class="ruleButton"
                :ghost="true"
                type="primary"
                icon="edit"
                @click="handleEdit(record)"
              />
              <a-divider type="vertical"/>
              <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a-button
                    class="ruleButton"
                    :ghost="true"
                    type="primary"
                    icon="delete"/>
              </a-popconfirm>
            </template>
          </span>
        </a-table>
      </div>
      <SupervisionListModal ref="modalForm" @ok="modalFormOk"></SupervisionListModal>
    </a-card>
    <template slot="footer">
      <a-button @click.stop="handleCancel">关闭</a-button>
    </template>
  </a-modal>
</template>

<script>

  import { filterObj } from '@/utils/util';
  import { deleteAction, downFile, getAction, getFileAccessHttpUrl, postAction, putAction } from '@/api/manage'
  import { DragResizable } from '@/mixins/DragResizable'
  import SupervisionListModal from './SupervisionListModal'
  import { mapGetters } from 'vuex';

  export default {
    name: 'SupervisionList',
    components: {
      SupervisionListModal
    },
    mixins: [DragResizable],
    data() {
      return {
        listItem: {}, // 列表详情
        visibleDetail: false,
        title: '查看督办',
        getDepartName: [], // 我的部门
        getTeamName: [], // 我的团队
        toggleSearchStatus: false,
        dragResizeColumns: [
          {
            title: '督办时间',
            align: 'center',
            width: 200,
            dataIndex: 'superviseTime',
            ellipsis: true
          },
          {
            title: '督办结果',
            align: 'center',
            width: 200,
            dataIndex: 'superviseRes',
            ellipsis: true
          },
          {
            title: '督办人',
            align: 'center',
            width: 200,
            dataIndex: 'superviseUserId_dictText',
            ellipsis: true
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            width:200,
            scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'action' }
          }
        ],
        url: {
          urlList: '/api/erp/audit/erpAuditSupervise/list',
          delete: "/api/erp/audit/erpAuditSupervise/delete",
          deleteBatch: "/api/erp/audit/erpAuditSupervise/deleteBatch",
          exportXlsUrl: "/api/erp/audit/erpAuditSupervise/exportXls",
          importExcelUrl: "/api/erp/audit/erpAuditSupervise/importExcel",
          bizCount: "/api/erp/audit/erpAuditSupervise/bizCount",
        },
        dataSource: [],
        loading: false,
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30', '50', '100', '200'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        isorter: {
          column: 'createTime',
          order: 'desc'
        },
        visible: false,
        dictOptions: {}
      }
    },
    created() {
      this.loadData();
      // 该方法触发屏幕自适应
      this.resetScreenSize();
      this.refresh();
      // 加载数据字典信息
      this.dragResizeColumnswidth = this.dragResizeColumns.map(val => {
        return val.width
      })
    },
    computed: {
    },
    methods: {
      ...mapGetters(['userInfo']), // 用户信息
      // 点击新增
      handleAdd () {
        this.$refs.modalForm.add(this.listItem);
      this.$refs.modalForm.title = '新增督办';
      this.$refs.modalForm.disableSubmit = false;
      },
      // 编辑
      handleEdit: function (record) {
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.title = '编辑督办';
        this.$refs.modalForm.disableSubmit = false;
      },
      handleDelete: function (id) {
        if (!this.url.delete) {
          this.$message.error('请设置url.delete属性!')
          return
        }
        var that = this;
        deleteAction(that.url.delete, { id: id }).then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            that.loadData();
          } else {
            that.$message.warning(res.message);
          }
        });
      },
      modalFormOk() {
        // 新增/修改 成功时，重载列表
          this.loadData();
      },
      handleCancelDetail(record) {
        this.listItem = record;
        this.loadData(1);
        this.visible = true
        this.visibleDetail = false
        
      },
      handleTableChange(pagination, filters, sorter) {
        // TODO 筛选
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field;
          this.isorter.order = sorter.order == 'ascend' ? 'asc' : 'desc'
        }
        this.ipagination = pagination;
        this.loadData();
      },
      loadData(arg) {
        // 加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        this.loading = true;
        var params = this.getQueryParams();// 查询条件
        getAction(this.url.urlList, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records;
            this.ipagination.total = res.result.total;
            // 判断是否当前页没有数据且不为第一页
            if (this.dataSource.length == 0 && this.ipagination.current != 1) {
              this.ipagination.current = this.ipagination.current - 1
              this.loadData(this.ipagination.current - 1);
            }
          } else {
            this.dataSource = []
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },
      getQueryParams() {
        let param = Object.assign({}, this.isorter);
        param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        param.paymentId= this.listItem.paymentId
        param.taskId= this.listItem.taskId
        return filterObj(param);
      },
      getQueryField() {
        let str = 'id,';
        for (let a = 0; a < this.dragResizeColumns.length; a++) {
          str += ',' + this.dragResizeColumns[a].dataIndex;
        }
        return str;
      },
      refresh() {
        this.loading = true
      },
      open(record) {
        this.loadData(1);
      },
      // 触发屏幕自适应
      resetScreenSize() {
        let screenWidth = document.body.clientWidth;
        if (screenWidth < 500) {
          this.scrollTrigger = { x: 800 };
        } else {
          this.scrollTrigger = {};
        }
      },
      handleCancel() {
        this.$emit('close')
        this.visible = false;
      },
      handleOk() {
        this.handleCancel();
      }
    }
  }
</script>
<style scoped lang="less">
  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }

  .anty-img-wrap {
    height: 25px;
    position: relative;
  }

  .anty-img-wrap > img {
    max-height: 100%;
  }
  /deep/ .capital .ant-form-item-control-wrapper{
    overflow: hidden;
  }
</style>
